import { computed } from 'vue'
import { LabelDirection, FormLayout } from '@/hooks/core'

export enum BtnDirection {
  Left = 'left',
  Right = 'right'
}

export interface Options {
  layout: FormLayout
  labelDirection: LabelDirection
  btnPosition?: BtnDirection
  labelName?: String
}

const defaultOptions: Options = {
  layout: FormLayout.Horizontal,
  labelDirection: LabelDirection.Left,
  btnPosition: BtnDirection.Right,
  labelName: ''
}

export function useSearchLayout(options: Options) {
  const { layout, labelDirection, btnPosition, labelName } = {
    ...defaultOptions,
    ...options
  }

  const btnItemLabel = computed(() => {
    if (labelDirection === LabelDirection.Top) {
      if (layout === FormLayout.Horizontal) {
        return '  '
      }
    }
    return ''
  })

  return [btnPosition ?? defaultOptions, labelName ?? btnItemLabel]
}